<template>
  <div>
    <!-- 页头 -->
    <el-page-header @back="$router.push('/welcome')" content="详情页面">
    </el-page-header>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 面试查询和修改 -->
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input
            placeholder="面试号或者候选人邮箱"
            v-model="queryInfo.query"
            class="input-with-select"
            @keyup.enter.native="getInterview"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getInterview"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="dialogFormVisible = true"
            >添加新的面试</el-button
          >
          <el-dialog title="新的面试" :visible.sync="dialogFormVisible">
            <el-form :model="newInterviewform">
              <el-form-item label="题目编号" :label-width="formLabelWidth">
                <el-input
                  v-model="newInterviewform.probId"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="候选人邮箱" :label-width="formLabelWidth">
                <el-input
                  v-model="newInterviewform.inviteeEmail"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="invite">确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>

      <!-- 题目列表 -->
      <el-table :data="currentInterList" border>
        <el-table-column label="面试号" prop="inviteId"> </el-table-column>
        <el-table-column label="面试官Email" prop="inviterUserEmail">
        </el-table-column>
        <el-table-column label="候选人Email" prop="inviteeUserEmail">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="进入面试"
              placement="top"
              :enterable="false"
            >
              <el-button
                icon="el-icon-search"
                @click="clickPush(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 1, 5, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="interListLen"
      >
      </el-pagination>
    </el-card>
  </div>
</template>



<script>
export default {
  created() {
    this.getList();
  },
  data() {
    return {
      queryInfo: { query: "", pagenum: 1, pagesize: 10 },
      interList: [],
      currentInterList: [],
      interListLen: 0,
      newInterviewform: {
        inviteeEmail: "",
        probId: 0,
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    // 跳转到对应面试页，且保存具体面试信息
    clickPush(row) {
      console.log(row);
      let interviewStr = JSON.stringify(row);
      window.sessionStorage.setItem("interview", [interviewStr]);
      this.$router.push("/interview/" + row.inviteId);
      // 如何在session中获取面试信息
      JSON.parse(window.sessionStorage.getItem("interview"));
    },

    updateCurrentList() {
      this.currentInterList = this.interList.slice(
        (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize,
        this.queryInfo.pagenum * this.queryInfo.pagesize
      );
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.updateCurrentList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.updateCurrentList();
    },
    // 选出符合搜索的面试
    findInterview(item) {
      return (
        item.inviteId == this.queryInfo.query ||
        item.inviteeUserEmail == this.queryInfo.query ||
        item.inviterUserEmail == this.queryInfo.query
      );
    },
    getInterview() {
      this.currentInterList = this.interList.filter(this.findInterview);
      if (this.queryInfo.query == "") this.currentInterList = this.interList;
    },
    getList() {
      const InspireCloud = require("@byteinspire/js-sdk");
      const myServiceId = "qcqsjd";
      const fnName = "invite_require_by_token";
      // 创建轻服务实例
      const inspirecloud = new InspireCloud({
        serviceId: myServiceId,
      });
      // 调用轻服务函数
      inspirecloud
        .run(fnName, {
          token: window.sessionStorage.getItem("token"),
        })
        .then((data) => {
          console.log(data);
          this.interList = data;
          this.currentInterList = data;
          this.interListLen = data.length;
          this.updateCurrentList();
        })
        .catch((error) => {
          // 处理异常
        });
    },
    // 创建并提交新的邀请
    invite() {
      this.$message.success("提交邀请");
      const InspireCloud = require("@byteinspire/js-sdk");
      const myServiceId = "qcqsjd";
      const fnName = "invite_create";

      // 创建轻服务实例
      const inspirecloud = new InspireCloud({
        serviceId: myServiceId,
      });

      console.log({
        token: window.sessionStorage.getItem("token"),
        inviteeUserEmail: this.newInterviewform.inviteeEmail,
        probId: this.newInterviewform.probId,
      });
      // 调用轻服务函数
      inspirecloud
        .run(fnName, {
          token: window.sessionStorage.getItem("token"),
          inviteeUserEmail: this.newInterviewform.inviteeEmail,
          probId: this.newInterviewform.probId,
        })
        .then((data) => {
          console.log(data);
          if (data.message) {
            this.$message.error(data.message);
          }
          this.getList();
        })
        .catch((error) => {
          // 处理异常
        });
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
</style>